<template>
	<view
		:class="['upload_container', '2,3'.includes(type) ? 'canvas_upload_container' : '', show ? '' : 'hide_upload_container']"
		:style="{ height: !show ? `0` : infoHeight ? `${infoHeight}px` : 'auto' }"
	>
		<!-- 上传图片后 canvas 区域选择提示 -->
		<view class="tip flex_center" v-if="'2,3'.includes(type)">{{ uploadImgSrc && type == 2 ? "请选择需替换的位置" : "" }}</view>
		<!-- 上传图片后 canvas 区域选择提示 -->

		<view class="upload_card">
			<!-- 已上传图片 只展示 -->
			<view class="has_upload has_upload_readonly flex_center" v-if="'1,3'.includes(type) && uploadImgSrc">
				<view class="clear_icon" v-if="type == 1" @tap.stop="clearImg">
					<image :src="$imgsUrl('0x72506284')" mode=""></image>
				</view>
				<image :src="uploadImgSrc" mode="aspectFit"></image>
			</view>
			<!-- 已上传图片 只展示-->

			<!-- 已上传图片 canvas 选取 -->
			<view class="has_upload" v-if="type == 2 && uploadImgSrc">
				<image :src="uploadImgSrc" mode="aspectFit"></image>
			</view>
			<!-- 已上传图片 canvas 选取-->

			<!-- 未上传图片 -->
			<view class="empty_upload flex_center" v-if="!uploadImgSrc" @tap.stop="clickUpload">
				<view class="empty_upload_icon flex_center">
					<image :src="$imgsUrl('0x72506282')"></image>
					<view class="">添加我家照片</view>
				</view>
				<view class="upload_tip flex_center">
					<image :src="$imgsUrl('0x72506281')" mode=""></image>
					<view class="">没有想法？点击使用示例图吧</view>
				</view>
			</view>
			<!-- 未上传图片 -->
		</view>

		<!-- canvas 操作按钮 -->
		<view class="canvas_action flex_bw" v-if="'2,3'.includes(type)">
			<view class="canvas_action_left flex">
				<!-- <view class="canvas_action_icon">
					<image :src="$imgsUrl('0x72506285')" mode=""></image>
				</view>
				<view class="canvas_action_icon">
					<image :src="$imgsUrl('0x72506286')" mode=""></image>
				</view>
				<view class="canvas_action_icon">
					<image :src="$imgsUrl('0x72506287')" mode=""></image>
				</view> -->
			</view>
			<view class="canvas_action_right flex" @tap.stop="clickClear">
				<view class="canvas_action_icon">
					<image :src="$imgsUrl('0x72506303')" mode=""></image>
				</view>
				<view class="">清除图片</view>
			</view>
		</view>
		<!-- canvas 操作按钮 -->
	</view>
</template>

<script>
import { getEleInfo } from "@/common/util/common";
export default {
	name: "uploadContainer",
	props: {
		//1只做展示 没有选取操作  2 canvas 3
		type: {
			type: Number,
			default: 1
		},
		uploadImgInfo: {
			type: Object,
			default: () => ({
				src: "",
				size: 0, //换算成 mb
				type: 0, //1视频 0图片
				status: "loading",
				errorMsg: ""
			})
		},
		show: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			// 组件所占据高度
			infoHeight: 0,
			// 图片容器的宽度 不能写死 getEleInfo 获取
			containerWidth: 329,
			// 图片容器的高度
			containerHeight: 245
		};
	},
	computed: {
		uploadImgSrc() {
			return this.uploadImgInfo.src;
		}
	},
	mounted() {
		this.initLayout();
	},
	methods: {
		// 点击清除
		clickClear() {
			if (this.type == 3) {
				this.clearImg();
			}
			// 清除canvas
		},
		initLayout() {
			getEleInfo(".upload_container", this).then((res) => {
				this.infoHeight = res.height;
			});
			getEleInfo(".upload_card", this).then((res) => {
				this.containerWidth = res.width;
				this.containerHeight = res.height;
			});
		},
		// 点击上传
		clickUpload() {
			const that = this;
			uni.chooseImage({
				count: 1,
				sourceType: ["album", "camera"],
				success: async (res) => {
					const seleData = res.tempFiles[0];
					console.log("seleData0", seleData);
					//换算成 mb
					const size = seleData.size / 1024 / 1024;
					if (size > 20) {
						return uni.showToast({
							title: "图片最大支持20MB"
						});
					}
					const imgInfo = {
						src: seleData.path,
						size, //换算成 mb
						type: 0, //1视频 0图片
						status: "loading",
						errorMsg: ""
					};
					that.$emit("updateImgInfo", imgInfo);
					uni.getImageInfo({
						src: seleData.path,
						success: (img) => {
							console.log("img", img);
						}
					});
					console.log(res, "arr", that.uploadImgInfo);
				}
			});
		},
		clearImg() {
			this.$emit("clearImg");
		}
	}
};
</script>

<style scoped lang="less">
.upload_container.canvas_upload_container {
	padding-top: 0;
	padding-bottom: 0;
}
.upload_container.hide_upload_container {
	overflow: hidden;
	visibility: hidden;
	padding: 0 46rpx 46rpx 46rpx;
}
.upload_container {
	transition: height 0.2s;
	padding: 46rpx;

	.tip {
		height: 78rpx;
		color: #555555;
		font-size: 24rpx;
		font-weight: bold;
	}
	.canvas_action {
		padding: 15rpx 0;
		.canvas_action_icon {
			display: flex;
			padding: 20rpx 16rpx 20rpx 0;
			margin-left: 30rpx;
			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
		.canvas_action_left {
			:first-child.canvas_action_icon {
				margin-left: 0;
			}
		}
		.canvas_action_right {
			color: #888;
			font-size: 26rpx;
			.canvas_action_icon {
				padding-right: 12rpx;
			}
		}
	}
	.upload_card {
		background-color: #fff;
		border-radius: 24rpx;
		height: 492rpx;

		.upload_tip {
			width: 404rpx;
			height: 46rpx;
			background: #f7f8f9;
			border-radius: 58rpx;
			color: #888888;
			font-size: 24rpx;
			margin-top: 82rpx;
			image {
				width: 20rpx;
				height: 24rpx;
			}
			view {
				padding-left: 8rpx;
			}
		}
		.has_upload {
			width: 100%;
			height: 100%;
		}
		.has_upload_readonly {
			position: relative;
			.clear_icon {
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				width: 46rpx;
				height: 46rpx;
				z-index: 7;
			}
		}
		.empty_upload {
			padding-bottom: 62rpx;
			flex-direction: column;
			padding-top: 190rpx;
			.empty_upload_icon {
				flex-direction: column;
				background: linear-gradient(329.4207735514857deg, #b458ff 0%, #486cf6 100%);
				font-size: 30rpx;
				font-weight: bold;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				image {
					width: 54rpx;
					height: 46rpx;
				}
				view {
					padding-top: 24rpx;
				}
			}
		}
	}
}
</style>